<template>
  <div class="feedback">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>意见反馈</span>
      </a>
    </header-top>
    <div class="myevaluate_content_list">
      <div class="myevaluate_content">
        <flexbox>
          <flexbox-item>
            <div class="myevaluate_content_item">
              <p class="myevaluate_content_item_p">综合评价</p>
            </div>
          </flexbox-item>
        </flexbox>
        <flexbox>
          <flexbox-item :span="10">
            <div class="myevaluate_content_evaluate" :class={active:ding} @click="handEvaluate('ding')">
              <img :src=dingUrl style="width: 15px;height: 15px;"/>
              <span>顶</span>
            </div>
            <div class="myevaluate_content_evaluate" :class={active:cai} @click="handEvaluate('cai')">
              <img :src=caiUrl style="width: 15px;height: 15px;"/>
              <span>踩</span>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="myevaluate_content myevaluate_content_textarea">
        <x-textarea v-model="content" :height="160" placeholder="你觉得我们做的怎么样..."></x-textarea>
      </div>
      <div class="myevaluate_footer">
        <x-button type="primary" @click.native="submit">提交</x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, XButton, Group, XTextarea} from 'vux'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'

  export default {
    name: "Feedback",
    components: {
      HeaderTop,
      Flexbox,
      FlexboxItem,
      XTextarea,
      Group,
      XButton
    },
    data() {
      return {
        content: '',
        ding: true,
        dingUrl: require('../../assets/images/icon_ding_selected.png'),
        cai: false,
        caiUrl: require('../../assets/images/icon_cai.png')
      }
    },
    methods: {
      handEvaluate(type) {
        if (type == 'ding') {
          this.ding = !this.ding;
          if (this.ding) {
            this.dingUrl = require('../../assets/images/icon_ding_selected.png');
          } else {
            this.dingUrl = require('../../assets/images/icon_ding.png');
          }
          this.cai = false;
          this.caiUrl = require('../../assets/images/icon_cai.png');
        } else if (type == 'cai') {
          this.cai = !this.cai;
          if (this.cai) {
            this.caiUrl = require('../../assets/images/icon_cai_selected.png');
          } else {
            this.caiUrl = require('../../assets/images/icon_cai.png');
          }
          this.ding = false;
          this.dingUrl = require('../../assets/images/icon_ding.png');
        }
      },
      submit() {
        const {content, ding, cai} = this;
        console.log({content, ding, cai});
      }
    }
  }
</script>

<style scoped>
  .feedback{
    overflow-y: hidden;
  }

  .myevaluate_content_list {
    margin-bottom: 10px;
    margin-top: 58px;
  }

  .myevaluate_content {
    margin: 10px;
    background-color: #fff;
    border: 1px solid #ffdccd;
    border-radius: 3px;
  }

  .myevaluate_content_item_p {
    margin: 15px 0 10px 15px;
    font-size: 14px;
    color: #a0a0a0;
  }

  .myevaluate_content_evaluate {
    width: 80px;
    height: 48px;
    line-height: 48px;
    border: 1px solid #ccc;
    color: #000;
    border-radius: 3px;
    margin: 0 0 10px 15px;
    float: left;
    text-align: center;
  }

  .active {
    border: none;
    background-color: #ff6633;
    color: #fff;
  }

  .myevaluate_footer {
    margin: 20px;
  }

  .myevaluate_content_textarea {
    color: #333333;
    font-size: 14px;
  }
</style>
